<template>
  <div class='container'>
    <el-card>
        <el-row :gutter="20" justify="center" type="flex">
          <el-col :span='15'>
            <el-form label-width="80px">
            <el-row justify="start" type="flex" >
                <el-form-item label="目录名称" class="ouerWhid">
                  <el-input v-model="fromdata"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="select" placeholder="请选择">
                    <el-option label="已禁用" value="1">已禁用</el-option>
                    <el-option label="已启用" value="0">已启用</el-option>
                  </el-select>
                </el-form-item>
            </el-row>
             </el-form>
          </el-col>
          <el-col :span='5'>
            <el-button @click="clean">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
          <el-col :span='5'>
            <el-button type="success" @click="add">新增目录</el-button>
          </el-col>
        </el-row>
        <el-alert
          :title="`数据一共${tableData.counts}条`"
          type="info"
          show-icon
          :closable='false'>
        </el-alert>
        <template>
          <el-table
            :data="tableData.items"
            border
            style="width: 100%"
            :cell-style="colstyle">
            <el-table-column
              prop="date"
              type="index"
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="subjectName"
              label="所属学科"
              width="180">
            </el-table-column>
            <el-table-column
              prop="directoryName"
              label="目录">
            </el-table-column>
            <el-table-column
              prop="username"
              label="创建者">
            </el-table-column>
            <el-table-column
              prop="addDate"
              label="创建日期">
            </el-table-column>
            <el-table-column
              prop="totals"
              label="面试题数量">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              >
              <template slot-scope="{ row }">
                {{row.state === 1? '已禁用' : '已启用'}}
              </template>
              </el-table-column>
            <el-table-column
              prop="address"
              label="操作">
              <template slot-scope='{ row }'>
                <el-button type="text" @click='isFals(row)'>{{ row.state ? '启用' : '禁用' }}</el-button>
                <el-button type="text" :disabled='row.state ? true : false' @click="edit(row)">修改</el-button>
                <el-button type="text" :disabled='row.state ? true : false' @click='deletes(row)'>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-row type="flex" justify="end" align="middle" style="height:60px">
          <el-pagination
            :current-page="page.page"
            :page-size="page.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            :total="page.total"
            background
            layout="prev, pager, next, sizes, jumper"
            @current-change="changePage"
            @size-change="handleSizeChange"
          />
        </el-row>
        <!-- 新增目录组件 -->
        <el-dialog
          :title="ruleForm.id? '修改':'新增'"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <el-form :model="ruleForm" :rules="rules">
              <el-form-item label="目录名称" prop="directoryName">
                <el-input v-model="ruleForm.directoryName" style="width:70%"></el-input>
              </el-form-item>
              <template>
                <el-form-item label="所 属 学 科">
                  <el-select v-model="ruleForm.subjectID" placeholder="请选择" >
                    <el-option :label="item.subjectName" :value="item.id" v-for="item in sublist.items" :key="item.  index"></el-option>
                  </el-select>
                </el-form-item>
              </template>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="btnOK">确 定</el-button>
          </span>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, add, sublist, changeState, remove, update } from '@/api/hmmm/directorys.js'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      xinxiu: '',
      sublist: [], // 学科列表
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      ruleForm: {
        directoryName: '', // 新增目录名称
        subjectID: '',
        id: null
      },
      dialogVisible: false, // 控制
      tableData: [], // 页面数据
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 10,
        total: 0 // 记录总数
      },
      select: '', // 状态下拉选择框
      fromdata: ''// 目录名称输入框
    }
  },
  computed: {},
  watch: {
  },
  async created () {
    // 获取路径参数
    this.fromdata = this.$route.query.name
    if (this.fromdata) {
      const { data } = await list({ ...this.page, directoryName: this.fromdata, state: this.select })
      this.tableData = data
      this.fromdata = ''
    } else {
      this.getList()
    }
  },
  mounted () {},
  methods: {
    colstyle({row, column, rowIndex, columnIndex}){
      if(row.state === 0 && columnIndex === 6 ) {
          return "color: #67C23A"
        } else if (row.state === 1 && columnIndex === 6) {
          return "color: red"
        }
    },
    async getList () {
      try {
        const { data } = await list(this.page)
        this.page.total = data.counts
        this.tableData = data
        console.log(data)
      } catch (error) {
        this.message(error)
      }
    },
    // 搜索按钮
    async search () {
      try {
        const { data } = await list({ ...this.page, directoryName: this.fromdata, state: this.select })
        this.tableData = data
        console.log(data)
      } catch (error) {
        this.message(error)
      }
    },
    // 清除按钮
    clean () {
      this.fromdata = ''
      this.select = ''
      this.getList()
    },
    // 新增按钮
    async add () {
      this.dialogVisible = true
      try {
        const { data } = await sublist()
        console.log(data)
        this.sublist = data
        console.log(this.sublist)
      } catch (error) {
        this.message(error)
      }
    },
    handleClose () {
      this.dialogVisible = false
      this.ruleForm.directoryName = ''
    },
    // 新增表单确定按钮
    async btnOK () {
      if (this.ruleForm.id) {
        try {
          await update(this.ruleForm)
        } catch (error) {
          this.message(error)
        }
        this.$message.success('修改成功')
        this.getList()
        this.handleClose()
        this.ruleForm.id = null
      } else {
        try {
          await add({ directoryName: this.ruleForm.directoryName, subjectID: this.ruleForm.subjectID })
        } catch (error) {
          this.message(error)
        }
        this.$message.success('增加成功')
        this.getList()
        this.handleClose()
      }
    },
    // 禁用按钮
    async isFals (data) {
      const { id, state } = data
      try {
        await changeState({ id: id, state: state === 1 ? 0 : 1 })
        this.getList()
      } catch (error) {
        this.message(error)
      }
    },
    // 分页组件
    changePage (newPage) {
      // 改变页码
      // newPage是当前点击的页码
      this.page.page = newPage // 将当前页码赋值给当前的最新页码
      this.getList()
    },
    handleSizeChange (newsize) {
      // 每页显示多少条，即页面容量
      this.page.pagesize = newsize
      this.getsubjectsList()
    },
    // 删除按钮
    deletes (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(id)
        await remove({ id: id.id })
        this.$message.success('删除成功')
        this.getList()
      })
    },
    // 修改
    edit (id) {
      this.dialogVisible = true
      this.ruleForm.id = id.id
    }
  }
}
</script>
<style scoped>
.el-row--flex {
  margin-top: 0px;
}
.container {
  padding: 15px;
}
</style>
